<template>
	<div>
		<div class="app-container ">
			<Search :lookup="data.lookup" @investigate="inves" />
			<TopInfo />
			<div class="mt-6 text-right">
				<el-button v-prmis="'template_view_add'" type="primary" @click="add">{{ $t('presets.view.add') }}</el-button>
			</div>
		</div>
		<!-- 表格 -->
		<div class="app-container" v-loading="data.mtloading">
			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full">
				<el-table-column prop="id" label="ID" />
				<el-table-column prop="template_name" :label="$t('presets.info.name')" show-overflow-tooltip />
				<el-table-column prop="name" :label=" $t('presets.view.name')" show-overflow-tooltip />
				<el-table-column prop="resolution" :label="$t('presets.info.resolution')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.width + '*' + scope.row.height }}
					</template>
				</el-table-column>
				<el-table-column prop="creator_nickname" :label="$t('source.creater')" show-overflow-tooltip />
				<el-table-column prop="create_time" :label="$t('date.createTime')" show-overflow-tooltip>
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.create_time, 3) }}
					</template>
				</el-table-column>
				<el-table-column :label="$t('public.operate')"  width="320px">
					<template #default="scope">
						<el-button size="small" type="primary" v-prmis="'template_view_getFind'" @click="toPreview(scope.row)">{{ $t('public.preview')}}</el-button>
						<el-button v-prmis="'template_view_copy'" size="small" type="info" @click="onCopy(scope.row)">{{ $t('public.copy')}}</el-button>
						<el-button v-prmis="'template_view_getFind'" size="small" type="success" @click="addition(scope.row)">{{$t('public.edit')}}</el-button>
							<el-button v-prmis="'template_view_update'" size="small" type="warning" @click="onModify(scope.row)">{{ $t('public.modify') }}</el-button>
						<el-button v-prmis="'template_view_del'" size="small" type="danger" @click="del(scope.row)">{{ $t('public.del')}}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<PageNum :total="data.total" :page="data.source" @exposeData="current" @fraction="fraction" />
		</div>
		<!-- 添加弹窗 -->
		<el-dialog v-model="data.showdialog" center width="40%" height="70%" :title="$t('presets.view.add')">
			<el-form v-if="data.showdialog" :model="data.formParam" label-width="100px" ref="ruleFormRef">
				<span :class="language=='en'?'text-[#ed0f0f] absolute ml-0 mt-2':'text-[#ed0f0f] absolute ml-3 mt-2'">*</span>
				<el-form-item :label="$t('presets.view.name')+':'" prop="name">
					<el-input v-model="data.info.name" :placeholder="$t('message.enterViewName')" />
				</el-form-item>
				<div class="ml-6 mb-4 text-[#8a6d3b] border bg-[#fcf8e3] p-1">
					{{ $t('message.selectTemplate') }}
				</div>
				<div class="flex flex-row">
					<div class="overflow-hidden overflow-y-auto h-80 w-96 basis-2/3  min-w-64">
						<div :class="item.className ? 'w-32 h-24 bg-sky-600  hover:bg-sky-700 border text-center inline-block mr-2 text-white' : 'text-center text-white bg-sky-500 hover:bg-sky-600 w-32 h-24 border inline-block mr-2'"
							:title="$t('presets.info.resolution')+':' + item.resolution" v-for="(item, index) in data.templateList" :key="item.id"
							@click="onViewItem(item)">
							<p class="concent_name">{{ item.name }}</p>
						</div>
					</div>
					<div class="basis-1/3 min-w-24 text-center text-3xl man-w-64" v-if="data.isPreviewTilte">
						<span>{{ $t('public.preview')}}</span>
					</div>
					<div v-else>
						<addPreviewView :viewInfoData="layoutRequest" :rowData="data.rowData" ref="refView" />
					</div>
				</div>
				<div class="w-full text-center">
					<div class="inline-block">
						<el-button type="primary" @click="onSave('add')">{{ $t('public.save')}}</el-button>
						<el-button @click="data.showdialog = false">{{ $t('public.cancel')}}</el-button>
					</div>
				</div>
			</el-form>
		</el-dialog>
		<!-- 修改弹窗 -->
		<el-dialog v-model="data.demonstrate" center width="30%" :title="$t('presets.view.viewInfo')">
			<el-form v-if="data.demonstrate" :model="data.info" label-width="100px" ref="ruleFormRef">
				<el-form-item :label=" $t('presets.view.name')+':'" prop="name">
					<el-input v-model="data.updataInfo.name" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>
				<div class="w-full text-center">
					<div class="inline-block">
						<el-button type="primary" @click="onSave('upDate')">{{ $t('public.save')}}</el-button>
						<el-button @click="data.demonstrate = false">{{ $t('public.cancel')}}</el-button>
					</div>
				</div>

			</el-form>
		</el-dialog>
		<!-- 复制 -->
		<el-dialog v-model="isCopy" center width="30%" :title="$t('presets.view.viewInfo')">
			<el-form v-if="isCopy" label-width="100px" ref="ruleFormRef">
				<el-form-item :label="$t('presets.info.name')+':'" prop="name">
					<el-input v-model="data.rowCopy.name" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>
				<div class="w-full text-center">
					<div class="inline-block">
						<el-button type="primary" @click="onSaveCopy">{{ $t('public.ok')}}</el-button>
						<el-button @click="isCopy = false">{{ $t('public.cancel')}}</el-button>
					</div>
				</div>

			</el-form>
		</el-dialog>

	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import getPlevel from '@/utils/level'
import addPreviewView from '../view/details/addPreviewView.vue';
import useRequest from "@/hooks/useRequset";
import { ElMessage, ElMessageBox } from "element-plus";
import { getLayoutList, gettemplateList, getUpdateView, getAddView, getTemplateViewList, getDelView, getTemplateViewCopy } from '@/api/presets';
import { useRouter } from "vue-router";
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
let ruleFormRef = ref<any>();
const router = useRouter()
let refView = ref()
let isCopy = ref(false)
let data = reactive({
	rowCopy:{},
	demonstrate: false,
	mtloading: false, // 加载
	list: [], // 列表信息
	rules: { // 表单验证
		name: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' },
		resolution: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' },
	},
	source: { // 筛选数据
		page: 1,
		pageNum: 15,
		name: ''
	},
	updataInfo: {
		name: '',
		resolution: "",
		id:''
	},
	info: {
		name: ''
	}, // 修改内容
	total: 0, // 总条数
	formParam: {}, // 填写表单
	showdialog: false,
	isPreviewTilte: true,
	layoutData: [],
	rowData: {},
	templateList: []
})
let onModify = (row)=>{
	data.updataInfo ={
		id : row.id,
		name: row.name,
		resolution: row.width + '*'+ row.height
	}
	data.demonstrate = true
}
let onSaveCopy = () =>{
	isCopy.value = false
	let parm = {
		id: data.rowCopy.id,
		name: data.rowCopy.name
	}
	getTemplateViewCopy(parm).then(res => {
		if (res.state == 200) {
			ElMessage({
				message: $t('message.copySuccess'),
				type: 'success'
			})
			getlist()
			return
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		})
	})
}
let onCopy = (row: any) => {
	data.rowCopy = row
	isCopy.value = true
}
// 删除模板
let del = (row) => {
	ElMessageBox.confirm($t('message.delData'))
		.then(res => {
			getDelView({ id: row.id }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}
// 保存
let onSave = (type) => {
	if (type == 'add') {
		const size = data.rowData.resolution.split('*').map(item => Number(item))
		data.formParam = {
			name: data.info.name,
			template_id: data.rowData.id,
			height: size[1],
			width: size[0],
			plugin_data: layoutRequest.data.value,
		}
		getAddView(data.formParam).then((res) => {
			if (res.state == 200) {
				ElMessage({
					message: $t('message.saveSuccess'),
					type: 'success'
				})
				data.showdialog = false
				getlist()
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		})

	} else {
		// 修改模板
		data.formParam.name = data.updataInfo.name
		data.formParam.id =  data.updataInfo.id
		getUpdateView(data.formParam).then(res => {
			if (res.state == 200) {
				ElMessage({
					message: $t('message.modifySuccess'),
					type: 'success'
				})
				data.demonstrate = false
				getlist('')
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		})
	}
}
// 获取模版中的组件列表
const layoutRequest = useRequest((row) => {
	return getLayoutList({ template_id: row.id })
})
// 点击模板组件视图列表
let onViewItem = (row) => {
	console.log('row', row)
	data.templateList.forEach(item => {
		item.className = ''
	})
	row.className = 'bg_Highlight'
	data.isPreviewTilte = false
	data.rowData = row
	layoutRequest.getData(row)
}
// 获取模版列表信息
let getlist = (e) => {
	data.mtloading = true
	getTemplateViewList(data.source).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}
// 添加模板
let add = () => {
	data.showdialog = true
	data.isPreviewTilte = true
	data.list.forEach(item => {
		item.className = ''
	})
	data.formParam = {
		name: ''
	}
	gettemplateList(data.source).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.templateList = res.data.data
			data.total = res.data.total
		}
	})
}
let toPreview = (row) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: row
		}))
	}
	router.push({ path: '/presets/view/details/preview', query: query })
}
// 编辑模板布局
let addition = (row:any) => {
	let query = {
		id: row.id
	}
	router.push({ path: '/presets/view/details/edit', query: query })
}

// 查询回调
let inves = (e) => {
	data.source.name = e.name
	data.source.page = 1
	data.source.pageNum = 15
	getlist(e)
}
// 页数回调
let current = (e) => {
	data.source.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.source.pageNum = e
	getlist()
}

getlist()

</script>
<style scoped>
.concent_name {
	line-height: 95px;
}
</style>
